<template>
   <div class="Aoir-footer">
      <div class="footer-top">
         <div class="footer-top-top">
            <div class="sss introduce">
               <div class="introduce-title">网站介绍</div>
               <div class="introduce-content">{{ cnyzs.COMMON_FOOTER_INTRODUCE }}</div>
            </div>
            <div class="sss Links">
               <div class="Links-content" v-for="(items, index) in cnyzs.COMMON_FOOTER_QUICK_NAV" :key="index">
                  <ul>
                     <li>{{ items.title }}</li>
                     <li v-for="(item, ind) in items.children" :key="ind" @click="Gonav(item)">{{ item.name }}</li>
                  </ul>
               </div>
            </div>
            <div class="sss relation">
               <div class="relation-top">
                  <div class="box qq" v-for="(item, index) in cnyzs.COMMON_FOOTER_CONTACT" :key="index"
                     @click="GoUrl(item.url)">
                     <div class="image">
                        <!-- <el-image style="width: 100%;" :src="item.blogroll_logo" /> -->
                     </div>
                     <div class="name">{{ item.name }}</div>
                  </div>
               </div>
               <div class="relation-bottom">LOGO</div>
            </div>
         </div>
         <!-- 友情链接 -->
         <div class="footer-top-bottom">
            <div class="friend-link" v-for="(item, index) in  cnyzs.COMMON_FOOTER_BLOGROLL" :key="index"
               @click="GoUrl(item.blogroll_urls)">
               <!-- <el-image style="width: 100%;" :src="item.blogroll_logo" /> -->
            </div>
         </div>
      </div>
      <div class="footer-bottom">
         <p>
            <span>{{ cnyzs.COMMON_FOOTER_COPYRIGHT }}</span>
            <nuxt-link :to="cnyzs.COMMON_FOOTER_ICP[0].url">{{ cnyzs.COMMON_FOOTER_ICP[0].name }}</nuxt-link>
            <nuxt-link :to="cnyzs.COMMON_FOOTER_ICP[1].url">{{ cnyzs.COMMON_FOOTER_ICP[1].name }}</nuxt-link>
         </p>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
const { cnyzs } = storeToRefs(cnyzsCommonpinia())

const clickbeian = (item: any) => {
   window.open(item.url, '_blank')
}

// 导航跳转
const Gonav = (item: any) => {
   window.open(item.path, '_blank')
}


// 友情跳转
const GoUrl = (url: string) => {
   window.open(url, '_blank')
}
</script>
<style lang="scss" scoped>
.Aoir-footer {
   width: 100%;
   background-color: #121212;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

   .footer-top {
      flex: 1;
      width: var(--aoir-m-width);
      margin: 0 auto;
      padding: 45px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #FFF;

      .footer-top-top {
         flex: 1;
         display: flex;
         justify-content: space-between;
         padding-bottom: 30px;

         .sss {
            border-right: 1px solid #222228;

            &:nth-child(3) {
               border-right: 0px solid #222228;
            }
         }

         .introduce {
            width: 390px;
            display: flex;
            flex-direction: column;
            padding-right: 40px;

            &-title {
               font-size: 16px;
               margin-bottom: 15px;
            }


            &-content {
               color: #949498;
               font-size: 14px;
               line-height: 27px;
            }
         }

         .Links {
            width: 460px;
            padding: 0 0 0 40px;
            display: flex;
            justify-content: space-between;

            &-content {
               flex: 1;

               ul {
                  width: 100%;
                  color: #949498;

                  li {
                     width: 100%;
                     color: #949498;
                     margin-bottom: 10px;
                     font-size: 14px;
                     cursor: pointer;

                     &:hover {
                        color: #FFF;
                     }

                     &:nth-child(1) {
                        color: #FFF;
                        font-size: 16px;
                        margin-bottom: 20px;
                     }
                  }
               }
            }
         }

         .relation {
            flex: 1;
            padding-left: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            &-top {
               flex: 1;
               // margin-bottom: 20px;
               display: flex;
               justify-content: flex-start;

               .box {
                  flex: 1;
                  height: 100px;
                  margin-right: 15px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  cursor: pointer;

                  .image {
                     width: 45px;
                     height: 45px;
                     border-radius: 50%;
                     background-color: #555;
                     margin-bottom: 10px;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     overflow: hidden;
                  }

                  .name {
                     font-size: 14px;
                     color: #949498;
                  }
               }
            }

            &-bottom {
               width: 100%;
               height: 80px;
               display: flex;
               justify-content: center;
               align-items: center;
            }
         }
      }

      .footer-top-bottom {
         width: 100%;
         height: 52px;
         display: flex;
         justify-content: space-between;

         .friend-link {
            width: 158.5714285714286px;
            height: 100%;
            background-color: #222228;
            margin-right: 15px;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 5px;

            .el-image {
               filter: opacity(0.4);
               transition: all .3s;
            }

            &:nth-last-child(1) {
               margin-right: 0px;
            }

            &:hover {
               .el-image {
                  filter: opacity(1);
               }
            }
         }
      }
   }

   .footer-bottom {
      height: 100px;
      width: 100%;
      border-top: 5px solid #555;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #666;

      p {
         letter-spacing: 0.5px;

         a {
            color: #666;
            transition: all .3s;

            &:hover {
               color: #EEE;
            }
         }
      }
   }
}
</style>